<template>
  <div id="disposition">
    <div class="container">
      <div class="h1">
        <span></span>
        <h1>处置中心</h1>
      </div>
      <div class="main">
        <div class="left">
          <div class="box">
            <ul class="title">
              <li class="active">病毒威胁防护</li>
              <li>终端信用评分报告表</li>
            </ul>
            <div class="right">
              <input type="text" placeholder="用户名" />
              <select name="" id="" placeholder="最近30天">
                <option value="30天内">30天内</option>
              </select>
              <button>查询</button>
            </div>
          </div>
          <ul class="content">
            <li class="virus show">
              <el-table :data="virus" style="width: 100%">
                <el-table-column prop="time" label="发生时间">
                </el-table-column>
                <el-table-column prop="source" label="攻击源地址">
                </el-table-column>
                <el-table-column prop="port" label="攻击源端口">
                </el-table-column>
                <el-table-column prop="destination" label="攻击目的地址">
                </el-table-column>
                <el-table-column prop="posts" label="攻击目的端口">
                </el-table-column>
                <el-table-column prop="type" label="攻击类型">
                </el-table-column>
                <el-table-column prop="block" label="是否阻断">
                </el-table-column>
              </el-table>
            </li>
            <li class="virus">
              <el-table :data="terminal" style="width: 100%">
                <el-table-column prop="usename" label="用户名">
                </el-table-column>
                <el-table-column prop="source" label="终端IP">
                </el-table-column>
                <el-table-column prop="url" label="MAC地址"> </el-table-column>
                <el-table-column prop="grade" label="用户信用等级">
                </el-table-column>
                <el-table-column prop="build" label="信用等级报告生成时间">
                </el-table-column>
                <el-table-column prop="result" label="联动推送结果">
                </el-table-column>
              </el-table>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      virus: [
        {
          time: "2021-6-7",
          source: "10.10.2.12",
          port: "4481",
          destination: "10.10.2.26",
          posts: "80",
          type: "DDOS",
          block: "是",
        },
        {
          time: "2021-6-15",
          source: "192.168.1.100",
          port: "2115",
          destination: "192.168.1.125",
          posts: "21",
          type: "僵尸网络",
          block: "是",
        },
        {
          time: "2021-7-24",
          source: "10.10.1.9",
          port: "22859",
          destination: "10.10.2.6",
          posts: "135",
          type: "勒索病毒",
          block: "是",
        },
      ],
      terminal: [
        {
          usename: "Administrator",
          source: "10.10.1.6",
          url: "ec9c-32ec-b814",
          grade: "高",
          build: "2021-08-01 20:56:37",
          result: "推送成功",
        },
        {
          usename: "Liu",
          source: "10.10.2.105",
          url: "809f-9bb2-0f5a",
          grade: "高",
          build: "2021-08-01 20:57:37",
          result: "推送成功",
        },
      ],
    };
  },
  mounted() {
    var lis = document.querySelectorAll(".title>li");
    var boxs = document.querySelectorAll(".content>li");
    for (let i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].onclick = function () {
        for (let j = 0; j < lis.length; j++) {
          lis[j].className = "";
          boxs[j].className = "virus";
        }
        this.className = "active";
        boxs[this.index].className = "virus show";
      };
    }
  },
};
</script>
<style lang="less" scoped>
* {
  line-height: 1;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

input {
  outline: none;
}

#disposition {
  font-size: 16px;
  user-select: none;
}

.container {
  width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 15px 0px 30px 30px;
  font-size: 16px;
  overflow: hidden;

  .h1 {
    background-color: #fbfcfd;
    height: 70px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0;

    span {
      display: inline-block;
      width: 8px;
      height: 28px;
      background-color: #15c87a;
      margin-right: 10px;
    }
  }

  h1 {
    font-size: 24px;
    color: #101010;
    line-height: 28px;
    
  }
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 8px;

      .right {
        margin-right: 86px;

        .show {
          display: block;
        }

        input {
          height: 30px;
          outline: none;
          padding-left: 5px;
          border: 1px solid #c4c5c5;
        }

        button {
          width: 60px;
          height: 30px;
          // outline: none;
          background: white;
          border: 1px solid #c4c5c5;
          cursor: pointer;
          border-radius: 4px;
        }
        // input[type="button"] {
        //   background: white;
        //   text-align: center;
        //   width: 60px;
        //   color: #c4c5c5;
        // }

        select {
          margin: 0 10px 0 20px;
          height: 30px;
          outline: none;
          border: 1px solid #c4c5c5;
        }
      }
    }

    .title {
      display: flex;
      cursor: pointer;

      .active {
        border-bottom: 2px solid #2ec8b9;
      }

      li {
        line-height: 40px;
        position: relative;
        text-align: center;
        padding: 0 10px;
        font-size: 18px;
        font-weight: bold;

        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }

    .content {
      width: 1200px;
      .virus {
        display: none;
      }
      .show {
        display: block !important;
      }
    }
  }
}
</style>
